<template>



  <div class="container  flex  flex-row" style="padding-bottom:40px;width:100%;">

    <div class="  flex flex-col" style="height:100%;flex:3">
      <div class="flex flex-1 flex-col">
        <div class="title1">检测系统</div>
        <div class="flex flex-1">

          <div ref="projectSigningOverview" style="width: 90%; height: 80%;"></div>

        </div>
      </div>
      <div class="flex flex-1 flex-col">
        <div class="title1">检测系统</div>
        <div class="flex flex-1">
          <div ref="monthlyIndicators" style="width: 90%; height: 80%;"></div>
        </div>
      </div>
    </div>
    <div class="  flex flex-col" style="height:100%;flex:5">

      <div class="  flex flex-row  f-j-e" style="height:60px;">
        <div class="title1">检测系统</div>
        <div class="  flex flex-row f-j-e" style="width:500px;" >
          <div style="margin-left:20px;" class="title3  flex  justify-center align-center"  @click="runStart" v-if="!runing">检测中</div>
          <div style="margin-left:20px;" class="title2  flex  justify-center align-center"  @click="runStop" v-if="runing">停止检测</div>
          <div style="margin-left:20px;" class="title2  flex  justify-center align-center">
            <router-link class="flex" :to="'/analysisLog'">查看结果</router-link>
          </div>
        </div>
      </div>
      <div class="flex flex-1">

        <div ref="chartlineDom" style="width: 90%; height: 80%;"></div>

      </div>
      <div class="flex flex-1" style="padding:20px;">
<!--        <div ref="salesRanking" style="width: 100%; height: 400px;"></div>-->
        <div  class="" ref="businessTrends" style="width: 90%; height: 80%;"></div>


      </div>
    </div>


  </div>



</template>

<script setup name="Cache">
import {getCache} from '@/api/monitor/cache';
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';
import {startAnalysis, stopAnalysis,logs,charts} from "@/api/fatigue";
const cache = ref([]);
const commandstats = ref(null);
const usedmemory = ref(null);
const {proxy} = getCurrentInstance();


const chartDatas = ref(null);
function getCharts() {
  loading.value = true;
  charts().then(response => {
    chartDatas.value = response.rows;
    loading.value = false;
  });
}



const loading = ref(true);

const runing = ref(false);
/** 搜索按钮操作 */
function runStart() {
  runing.value = true;
  startAnalysis({}).then(response => {
    proxy.$modal.msgSuccess("启动成功");
  });
}

function runStop() {
  runing.value = false;
  stopAnalysis({}).then(response => {
    proxy.$modal.msgSuccess("停止成功");
  });
}

// 创建一个响应式引用来保存DOM元素
const chartlineDom = ref(null);
// 绘制折线图
const drawline1 = () => {

  const chartInstance = echarts.init(chartlineDom.value);
  const option = {
    // 这里是ECharts的配置项，可以根据需要绘制不同类型的图表
    title: {
      text: 'ECharts 示例图表'
    },
    tooltip: {},
    xAxis: {
      data: ["类别1", "类别2", "类别3", "类别4", "类别5"]
    },
    yAxis: {},
    series: [{
      name: '数据系列',
      type: 'line', // 这里可以是'line'、'bar'、'pie'等，根据图表类型选择
      data: [120, 200, 150, 80, 70]
    }]
  };
  chartInstance.setOption(option);

};



// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成



  drawline1();
  drawline2();
  drawMonthlyIndicators()

  drawProjectSigningOverview()

  drawSalesRanking()



});

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});


const businessTrends = ref(null);
// 绘制折线图
const drawline2 = () => {
  const businessTrendsElement = echarts.init(businessTrends.value);
  const option = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      left: '3%', // 调整左边距
      right: '3%', // 调整右边距
      bottom: '3%', // 调整底部边距
      top: '5%', // 调整顶部边距
      containLabel: true, // 确保标签和轴标题被包含在容器内
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], // 示例数据
      axisLine: {
        show: false, // 不显示横坐标轴线
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}',
      },
    },
    series: [
      {
        name: '销售额',
        type: 'line',
        data: [620, 1032, 701, 1234, 890, 1430, 1120], // 示例数据，模拟起伏更大
        smooth: true, // 折线平滑
        lineStyle: {
          width: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#62c1fe' },
            { offset: 0.5, color: '#ad90f7' },
            { offset: 1, color: '#e875f2' },
          ]),
        },
        symbolSize: (value, params) => {
          // 获取数据系列的长度
          const seriesLength = option.series[0].data.length;
          // 中间节点放大
          if (params.dataIndex === Math.floor(seriesLength / 2)) {
            return 8; // 中间节点的大小
          }
          return 8; // 其他节点的大小
        },
      },
    ],
  };
  businessTrendsElement.setOption(option);
};




const monthlyIndicators = ref(null);
// 绘制柱状图
const drawMonthlyIndicators = () => {
  const monthlyIndicatorsElement = echarts.init(monthlyIndicators.value);
  const option = {
    legend: {
      data: ['计划', '实际'],
      icon: 'circle', // 设置图例图标为圆形
      left: 'left', // 将图例定位到左侧
      top: 'top', // 将图例定位到顶部
    },
    grid: {
      top: '45', // 距离容器上边界的距离
      right: '10', // 距离容器右边界的距离
      bottom: '3', // 距离容器下边界的距离
      left: '10', // 距离容器左边界的距离
      containLabel: true, // 包含标签的绘图区域
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisTick: {
        alignWithLabel: true,
      },
      axisLine: {
        show: false, // 不显示横坐标轴线
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
    },
    series: [
      {
        name: '实际',
        data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 234, 123],
        type: 'bar',
        stack: 'total', // 添加堆积效果
        barWidth: '30%', // 调整柱子宽度
        itemStyle: {
          borderRadius: [5, 5, 0, 0], // 只有顶部圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            // 设置渐变色
            { offset: 0, color: '#bdd1f6' },
            { offset: 1, color: '#4282ff' },
          ]),
        },
      },
      {
        name: '计划',
        data: [320, 132, 101, 134, 90, 230, 210, 320, 132, 101, 134, 90],
        type: 'bar',
        stack: 'total', // 添加堆积效果
        barWidth: '30%', // 调整柱子宽度
        itemStyle: {
          borderRadius: [5, 5, 0, 0], // 只有顶部圆角
          color: '#ebf2ff', // 设置柱子颜色
        },
      },
    ],
  };

  monthlyIndicatorsElement.setOption(option);
};



const projectSigningOverview = ref(null);

// 绘制饼图环形
const drawProjectSigningOverview = () => {
  const projectSigningOverviewElement = echarts.init(projectSigningOverview.value);
  const option = {
    legend: {
      orient: 'vertical',
      right: 10,
      align: 'left',
      top: 'center',
      textStyle: {
        rich: {
          name: {
            color: '#929292',
          },
          value: {
            color: '#000',
            fontWeight: 'bold',
            fontSize: 16, // 根据需要调整字体大小
          },
        },
      },
      data: [
        {
          name: '已签约 {value|80}{name| 个/5800万}',
          textStyle: { rich: { value: {}, name: {} } },
        },
        {
          name: '未签约 {value|18}{name| 个/5800万}',
          textStyle: { rich: { value: {}, name: {} } },
        },
        {
          name: '跟进中 {value|24}{name| 个/5800万}',
          textStyle: { rich: { value: {}, name: {} } },
        },
      ],
      icon: 'circle', // 设置图例图标为圆形
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['22%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: false,
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 80, name: '已签约 {value|80}{name| 个/5800万}' }, // 已签约
          { value: 18, name: '未签约 {value|18}{name| 个/5800万}' }, // 未签约
          { value: 24, name: '跟进中 {value|24}{name| 个/5800万}' }, // 跟进中
        ],
        itemStyle: {
          borderRadius: 0,
          borderColor: '#fff',
          borderWidth: 0,
        },
      },
    ],
    graphic: [
      {
        type: 'text',
        left: '65%', // 将文本水平居中
        top: '19%', // 根据实际情况调整，确保文本显示在legend上方
        style: {
          // 使用富文本格式
          rich: {
            a: {
              // 为“80”设置的样式
              fontSize: 16, // 放大字体大小
              fontWeight: 'bold', // 加粗
              color: '#000', // 字体颜色
            },
            b: {
              // 为“个/5800万”设置的样式
              fontSize: 14, // 字体大小
              color: '#929292',
            },
          },
          text: '项目总数 {a|80} {b|个/5800万}', // 显示的文本内容，使用上面定义的样式标签
          textAlign: 'center',
          fill: '#000', // 默认文本颜色，这里可能不会生效因为已经在rich中指定了颜色
        },
      },
      {
        type: 'text',
        left: '18%',
        top: '40%',
        style: {
          text: '72%',
          textAlign: 'center',
          fill: '#000',
          fontSize: 20,
        },
      },
      {
        type: 'text',
        left: '18%',
        top: '55%',
        z: 100,
        style: {
          text: '转化率',
          textAlign: 'center',
          fill: '#000',
          fontSize: 14,
        },
      },
    ],
  };
  projectSigningOverviewElement.setOption(option);
};


const salesRanking = ref(null);

// 绘制横向柱状图排行榜
const drawSalesRanking = () => {
  const salesRankingElement = echarts.init(salesRanking.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '0%', // 调整左边距
      right: '5%', // 调整右边距
      bottom: '3%', // 调整底部边距
      top: '5%', // 调整顶部边距
      containLabel: true, // 确保标签和轴标题被包含在容器内
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        show: false, // 不显示横坐标轴线
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
      splitLine: {
        show: false, // 不显示x轴网格线
      },
    },
    yAxis: {
      type: 'category',
      data: ['刘晓彬', '萧秀凝', '曲严琰'], // 示例数据
      axisLine: {
        show: false, // 不显示横坐标轴线
      },
      axisTick: {
        show: false, // 不显示刻度线
      },
      splitLine: {
        show: false, // 不显示y轴网格线
      },
      axisLabel: {
        rich: {
          iconStyle: {
            fontSize: 20, // 设置图标的字体大小为20
          },
          nameStyle: {
            // 定义名字的样式
            fontSize: 12, // 设置名字的字体大小为12，或者您希望的任何大小
          },
        },
        formatter: function (value, index) {
          // 根据index或value来决定显示哪个排名的图标
          const rankIcons = {
            2: '{iconStyle|🥇}',
            1: '{iconStyle|🥈}',
            0: '{iconStyle|🥉}',
          };
          return `${rankIcons[index]} {nameStyle|${value}}`;
        },
      },
    },
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [920, 1032, 1201], // 示例数据
        barWidth: '30%', // 调整柱子宽度
        itemStyle: {
          borderRadius: [0, 5, 5, 0], // 只有右侧圆角
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            // 设置渐变色，方向也要调整为横向
            { offset: 0, color: '#bdd1f6' },
            { offset: 1, color: '#4282ff' },
          ]),
        },
        label: {
          show: true, // 显示标签
          position: 'right', // 标签位置在顶部
          formatter: '{c}万', // 自定义显示的内容，{c}是指当前数据点的值
        },
      },
    ],
  };
  salesRankingElement.setOption(option);
};

getCharts()
</script>

<style scoped lang="scss">
* {
  color:#ffffff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #001432;
  color: #fff;
  font-family: "Microsoft YaHei", sans-serif;
}

.title1 {
  width:400px;height:30px;line-height: 30px;padding-left: 40px;
  background-image: url(/src/assets/images/slices/titlebg5.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
}


.title2 {
  width:150px;height:48px;line-height: 48px;
  background-image: url(/src/assets/images/slices/titlebg4.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
  text-align: center;
}

.title3 {
  width:150px;height:48px;line-height: 48px;
  background-image: url(/src/assets/images/slices/titlebg3.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
  text-align: center;
}



//.header {
//  text-align: center;
//  padding: 20px;
//  font-size: 24px;
//  background: linear-gradient(90deg, transparent, #0066cc, transparent);
//}

.container {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.detection-area {
  flex: 1;
  display: flex;
  gap: 20px;
}

.camera-box {
  flex: 1;
  border: 2px solid #0066cc;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.camera-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.control-panel {
  //width: 500px;
  background: rgba(0, 102, 204, 0.1);
  border-radius: 10px;
  padding: 20px;
}

.detection-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
  border-radius: 5px;
}

.detection-item i {
  margin-right: 10px;
  color: #0066cc;
}

.toggle {
  margin-left: auto;
  width: 40px;
  height: 20px;
  background: #0066cc;
  border-radius: 10px;
  position: relative;
}


.status-output {
  margin-top: 20px;
  background: rgba(0, 20, 50, 0.8);
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #0066cc;
}

.status-output h3 {
  width:410px;height:30px;line-height: 30px;padding-left: 20px;
  background: url(/src/assets/images/slices/titlebg2.png) no-repeat center / cover;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
}

.status-list {
  height: 150px;
  overflow-y: auto;
  font-family: monospace;
}

.status-item {
  padding: 5px 0;
  color: #7cb8ff;
  font-size: 14px;
}

/* 自定义滚动条样式 */
.status-list::-webkit-scrollbar {
  width: 6px;
}

.status-list::-webkit-scrollbar-track {
  background: rgba(0, 102, 204, 0.1);
  border-radius: 3px;
}

.status-list::-webkit-scrollbar-thumb {
  background: #0066cc;
  border-radius: 3px;
}


.optionTitle {
  width:100%;height:60px;line-height: 60px;padding-left: 20px;
  background-image: url(/src/assets/images/slices/titlebg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
}

.btn {
  display: block;
  width: 100%;
  //padding: 15px;
  //margin: 10px 0;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn-start {
  background: #0066cc;
}

.btn-stop {
  background: #gold;
}


.btn-start {
  border-top:1px solid #409EFF;
  width:200px;height:50px;line-height: 50px;padding-left: 20px;
  background-image: url(/src/assets/images/slices/btn1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;


}
.btn-stop {
  border-top:1px solid #409EFF;
  width:200px;height:50px;line-height: 50px;padding-left: 20px;
  background-image: url(/src/assets/images/slices/btn2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;



}
</style>

